/* 代码编辑器 */
<template>
  <div class="codeeditor-config">
    <je-form-item label="语言类型" name="language">
      <je-select
        v-model:value="formState.language"
        config-info="JE_META_EDITOR_LANGUAGE,language~code,S"
        editable
      ></je-select>
    </je-form-item>
    <je-form-item label="关闭帮助工具" name="hideApi">
      <je-switch v-model:value="formState.hideApi" mode="checkbox" />
      <span class="prompt">启动后编辑器将关闭右侧的帮助工具。</span>
    </je-form-item>
  </div>
</template>
<script>
  import { defineComponent, reactive, watch } from 'vue';
  import { Form, Select } from '@jecloud/ui';
  import { decode } from '@jecloud/utils';
  import { useInjectOtherCOnfig } from '../context';

  export default defineComponent({
    name: 'CodeeditorConfig',
    components: {
      JeFormItem: Form.Item,
      JeSelect: Select,
    },
    props: {
      otherConfig: {
        type: String,
        default: '',
      },
    },
    setup(props, { expose }) {
      const parentContext = useInjectOtherCOnfig();
      const config = (props.otherConfig && decode(props.otherConfig ?? '{}')) ?? {};
      const formState = reactive({
        language: config.language || 'javascript', //语言类型
        hideApi: config.hideApi || '0', // 显示帮助工具
      });

      watch(
        () => formState,
        () => {
          parentContext.setConfig(formState);
        },
        { deep: true },
      );

      //暴露表单值用于父组件赋值
      expose({
        formState,
      });

      return { formState };
    },
  });
</script>
<style lang="less" scoped></style>
